<template>
    <div class="content">
        <el-row class="enterprise_info hpx-title-border">
            <span class="col"><span class="hpx-label">报价机构：</span>{{filterForm.enterpriseName}}</span>
            <span class="col">
                <span class="hpx-label">联系人：</span>
                <span v-if="!isEditName">{{filterForm.contactName}}</span>
                <el-input
                    v-if="isEditName"
                    size="small"
                    class="contactName"
                    placeholder="请输入联系人姓名"
                    autofocus
                    suffix-icon="el-icon-edit"
                    v-model="filterForm.contactName">
                </el-input>
                <span class="editBtn" 
                    v-if="!isEditName"
                    @click="isEditName = !isEditName">
                    <i class="iconfont icon-bianji"></i>
                </span>
            </span>
            <span class="col">
                <span class="hpx-label">联系方式：</span>
                <span v-if="!isEditPhone">{{filterForm.contactPhone}}</span>
                <el-input
                    v-if="isEditPhone"
                    size="small"
                    class="contactName"
                    placeholder="请输入联系方式"
                    autofocus
                    suffix-icon="el-icon-edit"
                    v-model="filterForm.contactPhone">
                </el-input>
                <span class="editBtn" 
                    v-if="!isEditPhone"
                    @click="isEditPhone = !isEditPhone">
                    <i class="iconfont icon-bianji"></i>
                </span>
            </span>
        </el-row>
        <el-form ref="filterForm" :model="filterForm" label-width="120px" size="small" class="wantBill_condition">
            <el-row>
                <el-form-item label="票据类型：">
                    <el-radio-group v-model="filterForm.billType" size="small" @change="changeBillType">
                        <el-radio-button v-for="item in billTypes" :label="item.key" :key="item.key">{{item.label}}</el-radio-button>
                    </el-radio-group>
                </el-form-item>
            </el-row>
            <el-row>
                <el-col :span="10" class="bill_price_trem">
                    <el-form-item label="票面金额：" prop="billSumPriceStart">
                        <el-col :span="10">
                            <el-input type="number" v-model="filterForm.billSumPriceStart" placeholder="请输入(万元)"></el-input>
                        </el-col>
                        <el-col :span="2" class="hpx-label">——</el-col>
                        <el-col :span="10">
                            <el-input type="number" v-model="filterForm.billSumPriceEnd" placeholder="请输入(万元)"></el-input>
                        </el-col>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="每十万扣：" prop="billEveryPlus">
                        <el-col :span="10">
                            <el-input type="number" v-model="filterForm.billEveryPlus" placeholder="请输入(元)"></el-input>
                        </el-col>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="10">
                    <el-form-item label="求购数量：" prop="number">
                        <el-col :span="10">
                            <el-input type="number" v-model="filterForm.number" placeholder="请输入(张)"></el-input>
                        </el-col>
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="expire_time_trem">
                    <el-form-item label="到期时间：">
                        <el-col :span="6">
                            <el-select v-model="filterForm.termType" :disabled="filterForm.billType == 102" @change="changeTermType" placeholder="请选择">
                                <el-option
                                    v-for="item in termType"
                                    :key="item.key"
                                    :label="item.label"
                                    :value="item.key">
                                </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="17">
                            <el-date-picker
                                v-model="filterForm.time_interval"
                                type="daterange"
                                unlink-panels
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                size="small"
                                format="yyyy-MM-dd"
                                :default-time="['00:00:00', '23:59:59']">
                            </el-date-picker>
                        </el-col>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-form-item label="承兑机构：">
                    <el-checkbox-group v-model="acceptType" size="small" @change="changeAcceptType()">
                        <el-checkbox-button v-for="item in acceptOptions" :label="item.key" :key="item.key">{{item.label}}</el-checkbox-button>
                    </el-checkbox-group>
                </el-form-item>
            </el-row>
            <el-row>
                <el-form-item label="瑕疵接受：">
                    <el-radio-group v-if="filterForm.billType == 101" v-model="filterForm.falwRequire" size="small">
                        <el-radio-button v-for="item in flaws" :label="item.key" :key="item.key">{{item.label}}</el-radio-button>
                    </el-radio-group>
                    <el-radio-group v-if="filterForm.billType == 102" v-model="filterForm.falwRequire" size="small">
                        <el-radio-button v-for="item in flaws_paper" :label="item.key" :key="item.key">{{item.label}}</el-radio-button>
                    </el-radio-group>
                </el-form-item>
            </el-row>
            <el-row>
                <el-form-item label="账户状态：">
                    <el-radio-group v-model="filterForm.customerStatus" size="small">
                        <el-radio-button v-for="item in cusromerStatus" :label="item.key" :disabled="filterForm.customerStatus !=null" :key="item.key">{{item.label}}</el-radio-button>
                    </el-radio-group>
                </el-form-item>
            </el-row>
            <el-row class="remarks">
                <span>原始报价：</span>
                <el-input type="textarea" v-model="filterForm.remark" placeholder="请输入其他需要特别说明的求购信息(200字以内)"></el-input>
            </el-row>
            <el-row class="btn_center">
                <el-button type="info" class="hpx-cancel-color dialog-button">取消</el-button>
                <el-button type="primary" class="dialog-button" @click="publish()">发布</el-button>
            </el-row>
        </el-form>
    </div>
</template>

<script lang="ts">
    import {Vue, Component} from 'vue-property-decorator'
    import moment from 'moment'
    import { mapGetters, mapState } from 'vuex';
    import { dateAdd } from '@/util/format'
    @Component({
        computed:{
            ...mapState([
                'userInfo'
            ])
        }
    })
    export default class NewWantBill extends Vue {
        
    //data
        isEditName = false
        isEditPhone = false
        //筛选条件
        acceptType = ['']
        filterForm = {
            enterpriseId: '',
            enterpriseName: '',
            contactName: '',
            contactPhone: '',
            billType: 101,
            bankType: '',
            billSumPriceStart: '',
            billSumPriceEnd: '',
            billEveryPlus: '',
            number: '',
            deadlineDayStart: '',
            deadlineDayEnd: '',
            min_dead_date: '',
            max_dead_date: '',
            time_interval: [dateAdd('m',11,dateAdd("d", 15, new Date())),dateAdd('m',12,new Date())],
            falwRequire: '1500',
            customerStatus: 0,
            remark: '',
            termType: '2'
        }
        //筛选按钮
        billTypes = [{
                key: 101,
                label: '电票'
            },{
                key: 102,
                label: '纸票'
        }]
        acceptOptions = [{
                label: '全部',
                key: ''
            },{
                label: '国股',
                key: 401
            },{
                label: '城商',
                key: 402
            },{
                label: '三农',
                key: 404
            },{
                label: '村镇',
                key: 405
            },{
                label: '外资',
                key: 406
            },{
                label: '财务公司',
                key: 407
            },{
                label: '商票',
                key: 408
        }]
        flaws = [{
                label: '无',
                key: '1500'
            },{
                label: '回头',
                key: '1501'
            },{
                label: '重复',
                key: '1506'
            },{
                label: '质押',
                key: '1507'
        }]
        flaws_paper = [{
                label: '无',
                key: '1500'
            },{
                label: '回头',
                key: '1501'
            },{
                label: '背书不清晰',
                key: '1502'
            },{
                label: '书写不规范',
                key: '1503'
            },{
                label: '骑缝章不规范',
                key: '1504'
            },{
                label: '收背不符',
                key: '1505'
            },{
                label: '重复背书',
                key: '1506'
            },{
                label: '未知瑕疵',
                key: '1599'
        }]
        cusromerStatus = [{
                key: 0,
                label: '未绑卡用户'
            },{
                key: 1,
                label: '非兴业户'
            },{
                key: 2,
                label: '兴业户'
        }]
        termType = [{
                key: '1',
                label: '半年'
            },{
                key: '2',
                label: '一年'
            },{
                key: '3',
                label: '不限'
        }]
        // rules = {
        //     billSumPriceStart: [
        //         {required: true, message: '请输入票面金额', trigger: 'blur'}
        //     ],
        //     billSumPriceEnd: [
        //         {required: true, message: '请输入票面金额', trigger: 'blur'}
        //     ],
        //     billEveryPlus: [
        //         {required: true, message: '请输入每十万扣', trigger: 'blur'}
        //     ],
        //     number: [
        //         {required: true, message: '请输入求购数量', trigger: 'blur'}
        //     ]
        // }
    //methods
        p(s) {
            return s < 10 ? '0' + s: s;
        }
        //切换票据类型
        changeBillType () {
            if(this.filterForm.billType == 102){
                this.filterForm.termType = '1'
                this.filterForm.time_interval = [dateAdd('m',5,dateAdd("d", 15, new Date())),dateAdd("m", 6, new Date())]
            }else{
                if(this.filterForm.termType == '1'){
                    this.filterForm.time_interval = [dateAdd('m',5,dateAdd("d", 15, new Date())),dateAdd("m", 6, new Date())]
                }else if(this.filterForm.termType == '2'){
                    this.filterForm.time_interval = [dateAdd('m',11,dateAdd("d", 15, new Date())),dateAdd("m", 12, new Date())]
                }else{
                    this.filterForm.time_interval = [new Date(),dateAdd("m", 12, new Date())]
                }
            }
        }
        //切换到期时间
        changeTermType () {
            if(this.filterForm.termType == '1'){
                this.filterForm.time_interval = [dateAdd('m',5,dateAdd("d", 15, new Date())),dateAdd("m", 6, new Date())]
            }else if(this.filterForm.termType == '2'){
                this.filterForm.time_interval = [dateAdd('m',11,dateAdd("d", 15, new Date())),dateAdd("m", 12, new Date())]
            }else{
                this.filterForm.time_interval = [new Date(),dateAdd("m", 12, new Date())]
            }
        }
        //切换承兑机构
        changeAcceptType () {
            if(this.acceptType[this.acceptType.length-1] == ''){
                this.acceptType = ['']
            }else{
                if(this.acceptType.indexOf('')>-1){
                    this.acceptType.splice(this.acceptType.indexOf(''),1)
                }
            }
        }
        //查询用户信息
        async getCustomer () {
            let res = await this.$http.get('bills/newBillOffer/getBankAccountByEnterprisrId')
            if(res.status == 200){
                this.filterForm.enterpriseName = res.data.enterpriseName
                this.filterForm.contactName = res.data.userName
                this.filterForm.contactPhone = res.data.phoneNumber
                this.filterForm.customerStatus = res.data.customer_status
            }
        }
        //发布
        async publish () {
            if(!this.filterForm.contactName){
                this.$alert('请输入联系人姓名','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box'
                })
                return false
            }
            if(!this.filterForm.contactPhone){
                this.$alert('请输入手机号','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box'
                })
                return false
            }
            let myreg=/^[1][3,4,5,6,7,8][0-9]{9}$/;
            if (!myreg.test(this.filterForm.contactPhone)) {
                this.$alert('请输入正确的手机号','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box'
                })
                return false
            }
            if(!this.filterForm.billSumPriceStart || !this.filterForm.billSumPriceEnd){
                this.$alert('请输入票面金额','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box'
                })
                return false
            }
            if(!this.filterForm.billEveryPlus){
                this.$alert('请输入每十万扣','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box'
                })
                return false
            }
            if(!this.filterForm.number){
                this.$alert('请输入求购数量','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box'
                })
                return false
            }
            this.filterForm.enterpriseId = this.userInfo.enterprise_id
            this.filterForm.bankType = this.acceptType.join(',')
            this.filterForm.deadlineDayStart = moment(this.filterForm.time_interval[0]).format('YYYY-MM-DD')
            this.filterForm.deadlineDayEnd = moment(this.filterForm.time_interval[1]).format('YYYY-MM-DD')
            let res = await this.$http.post('bills/newBillOffer/addWantBill',this.filterForm)
            if(res.status == 200){
                this.$router.push('wantBill/2')
            }
        }
        mounted () {
            this.getCustomer()
        }
    }
</script>

<style lang="scss" scoped>
    .enterprise_info{
        height: 50px;
        line-height: 50px;
        font-size: 14px;
        .title_text{
            margin-left: 10px;
        }
        .col{
            margin-left: 50px;
        }
        .col:first-child{
            margin-left: 10px;
        }
        .contactName{
            width: 200px;
        }
        .editBtn{
            cursor: pointer;
        }
    }
    .wantBill_condition{
        padding-top: 18px;
        .bill_price_trem{
            .hpx-label{
                width: 36px;
                text-align: center;
            }
        }
        .expire_time_trem{
            .el-select{
                margin-right: 10px;
            }
        }
    }
    .remarks {
        display: flex;
        span{
            width: 106px;
            text-indent: 14px;
            font-size: 16px;
        }
    }
    .btn_center{
        padding: 20px 0;
        text-align: center;
    }
</style>
<style lang="scss">
    .wantBill_condition{
        .el-checkbox-button{
            .el-checkbox-button__inner{
                font-size: 14px;
                padding: 8px 15px;
            }
        }
        .el-radio-button{
            .el-radio-button__inner{
                font-size: 14px;
                padding: 8px 15px;
            }
        }
    }
</style>
